<script lang="ts">
  export default { name: 'PoleChainItem' };
</script>
<script lang="ts" setup>
  import { Card, Statistic } from '@arco-design/web-vue';
  import { IconCaretUp, IconCaretDown } from '@arco-design/web-vue/es/icon';
  interface ChainItemData {
    cnt: number;
    than_before?: number;
  }
  interface ChainItemProps {
    title?: string;
    data?: ChainItemData;
  }
  withDefaults(defineProps<ChainItemProps>(), {
    title: '',
    data: () => {
      return {
        cnt: 0,
        than_before: 0,
      };
    },
  });
</script>

<template>
  <Card
    class="bg-gray-50 rounded-[2px] w-[calc(33.33333%-20px)] mr-[20px] mb-[20px] [&:nth-child(3n)]:mr-0"
    :bordered="false"
  >
    <Statistic :title="title" :value-from="0" :value="data.cnt" animation showGroupSeparator />
    <div>
      <span class="mr-[8px]">较日前</span>
      <span class="mr-[4px]"
        ><IconCaretUp class="text-blue-500" v-if="data.than_before > 0" /><IconCaretDown
          class="text-red-500"
          v-if="data.than_before < 0"
      /></span>
      <span>{{ data.than_before || '--' }}</span>
    </div>
  </Card></template
>
